<template>
    <ElContainer class="admin-container">
        <el-main class="admin-main">
            <el-table :data="tableData" border height="100%" @sort-change="sortchange">
                <el-table-column prop="ID" label="userid" sortable="custom"></el-table-column>
                <el-table-column prop="user.name" label="用户" sortable="custom"></el-table-column>
                <el-table-column prop="integral" label="金币" sortable="custom"></el-table-column>
                <el-table-column prop="name" label="商品名称" sortable="custom"></el-table-column>
                <el-table-column prop="state" label="兑换状态" sortable="custom">
                    <template #default="scope">
                        {{ scope.row.state ? scope.row.state === 1 ? '未发货' : '已收到' : '未兑换' }}
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="兑换时间" sortable="custom"></el-table-column>
                <el-table-column prop="userphone" label="联系方式" sortable="custom"></el-table-column>
                <el-table-column prop="address" label="地址" sortable="custom"></el-table-column>
                <el-table-column prop="notes" label="备注" sortable="custom"></el-table-column>
                <el-table-column prop="notes" label="操作" sortable="custom">
                    <template #default="scope">
                        <el-button type="primary" @click="update(scope.row)">编辑
                        </el-button>
                        <el-button :disabled="scope.row.state" @click="del(scope.row)">取消</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <el-pagination @current-change="handleCurrentChange" :page-size="Number(limit)" layout="prev, pager, next"
                :total="count"></el-pagination>
        </el-footer>
        <el-dialog v-model="dialogVisible" title="添加" width="800px">
            <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" status-icon>

                <el-form-item label="商品名称" prop="name">
                    {{ ruleForm.name }}
                </el-form-item>
                <el-form-item label="金币" prop="integral">
                    {{ ruleForm.integral }}
                </el-form-item>
                <el-form-item label="兑换状态" prop="remainingquantity">
                    <el-radio-group v-model="ruleForm.state" class="ml-4">
                        <el-radio :label="0">未收到</el-radio>
                        <el-radio :label="1">已发送</el-radio>
                        <el-radio :label="2">已收到</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="联系方式" prop="num">
                    <el-input v-model="ruleForm.userphone" />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="ruleForm.address" />
                </el-form-item>
                <el-form-item label="备注" prop="remainingquantity">
                    <el-input v-model="ruleForm.notes" />
                </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="resetForm">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </ElContainer>
</template>

<script setup lang="ts">
import {
    onMounted,
    ref,
    watch,
    reactive,
    computed
} from "vue";
import { ElContainer, ElHeader, ElMain, ElFooter, ElMessage, ElTable, ElTableColumn, ElPagination, ElMessageBox } from "element-plus";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { Iobj, asyncdelintegralrewarduser, asyncgetintegralrewarduser, asyncupdateintegralrewarduser } from "../../../api";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import { assign, forEach } from "underscore";

const ruleForm = reactive<Studycodemodel.Iintegralrewarduser>({

})

const dialogVisible = ref(false)
const p = defineProps<{ ID: number }>()
const sortable = ref<"DESC" | "ASC">("DESC");
const limit = ref(20);
const offset = ref(0);
const order = ref<keyof Studycodemodel.Iintegralrewarduser>("ID");

const tableData = ref<Studycodemodel.Iintegralrewarduser[]>([]);

const store = useStore(Storekey)

const count = ref<number>(0);


onMounted(async () => {
    start()
});

function update(row: Studycodemodel.Iintegralreward) {
    dialogVisible.value = true;
    Object.assign(ruleForm, assign({}, row));
}

function del(row: Studycodemodel.Iintegralrewarduser) {
    ElMessageBox.confirm(`是否取消此次兑换`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            await asyncdelintegralrewarduser({ ID: row.ID, });
            ElMessage({
                type: "success",
                message: "成功!",
            });
            start();
        })
        .catch((e: string) => {
            ElMessage({
                message: "失败" + e,
                type: "error",
            });
        });
}

function sortchange(row: {
    order: string;
    prop: keyof Studycodemodel.Iintegralrewarduser;
}) {
    const { prop } = row;
    if (row.order == "descending") {
        sortable.value = "DESC";
    } else {
        sortable.value = "ASC";
    }
    order.value = prop;
}


async function start() {
    try {
        const obj: Iobj<Studycodemodel.Iintegralrewarduser> = {
            _limit: limit.value,
            _offset: offset.value,
            _order: order.value,
            _sortable: sortable.value,
            integralrewardid: p.ID
        }

        const data = await asyncgetintegralrewarduser(obj)
        tableData.value = data.rows
        count.value = data.count
    } catch (e: any) {
        ElMessage.error(e);
    }
}


function handleCurrentChange(val: number) {
    offset.value = limit.value * (val - 1);
}

async function resetForm() {
    asyncupdateintegralrewarduser(ruleForm).then(e => {
        forEach(ruleForm, (e, k) => {
            delete ruleForm[k]
        })
        dialogVisible.value = false
        start()
    })
}

watch(() => [limit.value, offset.value, order.value, sortable.value, ruleForm.userid, ruleForm.type], () => {
    start();
});
</script>

<style scoped>
a {
    text-decoration: none;
}
</style>

<style>
.admin-main {
    overflow: auto;
}

.admin-container {
    height: 100%;
}
</style>